<template>
<div>
  <el-row>
	  <el-col :span="3">
		 <h4>请选择题库：</h4> 
	  </el-col>
	  <el-col :span="5">
		<el-select v-model="topicBankId" placeholder="请选择题库" style="width:100%" @change="getTopics" >
			<el-option v-for="(item,index) in topicBanks" :key="index" :value="item.id" :label="item.topicBankName"/>
		</el-select>  
	  </el-col>
	  <el-col :span="5" :push="1">
		  <h4>请选择题目类型：</h4>
	  </el-col>
	  <el-col :span="5">
		  <el-select v-model="type" placeholder="请选择题目类型" clearable  style="width:100%" @change="getTopics" >
		    <el-option v-for="(item,index) in typeList" :key="index" :value="item.value" :label="item.label"/>
		  </el-select>
	  </el-col>
  </el-row>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      height="500px"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        label="题目名称"
        width="580">
      <template slot-scope="scope">{{ scope.row.question}}</template>
    </el-table-column>
    <el-table-column
        label="题目类型"
        width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.topicType==0" style="color: #00baf2">单选题</span>
        <span v-else-if="scope.row.topicType==1" style="color: #00baf2">多选题</span>
        <span v-else-if="scope.row.topicType==2" style="color: #00baf2">判断题</span>
        <span v-else-if="scope.row.topicType==3" style="color: #00baf2">填空题</span>
        <span v-else-if="scope.row.topicType==4" style="color: #00baf2">简答题</span>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="save">保存</el-button>
</div>
</template>

<script>
import axios from "@/utils/axiosutils.js"

export default {
  name: "GetFromTopicBank",
  data(){
    return{
      type:"",
      topicBankId:"",
      topicBanks:[],
      tableData:[],
      topics: [],
      typeList:[{
        label:"单选题",
        value:1
      },{
        label:"多选题",
        value:2
      },{
        label:"判断题",
        value:3
      },{
        label:"填空题",
        value:4
      },{
        label:"简答题",
        value:5
      }]
    };
  },
  created() {
    this.getData();
  },
  methods:{
    getData(){
      axios.get("topicBank/list",resp=>{
        this.topicBanks=resp.obj.records;
      })
    },
    getTopics(){
      if(this.topicBankId!=""){
		  console.log(this.type)
        axios.post("exam/selectFromTopicBank",resp=>{
          this.tableData=resp.obj;
        },{
          id:this.topicBankId,
		  type:this.type
        });
      }else {
        this.$message.warning("请先选择题库")
      }

    },
    handleSelectionChange(val){
      this.topics=val;
      console.log(this.topics)
    },
    save(){
      this.$emit('update:show', false);
      this.$emit('update:topics', this.topics);
      this.$emit('getData');
    }
  }
}
</script>

<style scoped>

</style>
